<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>解构赋值</title>
  </head>
  <body>
    <script>
      // ES6 允许按照一定模式从数组和对象中提取值
      // 1. 数组解构
      // 数组解构赋值就是下标的匹配模式。
      const f4 = ["张三", "李四", "王五"];
      let [zs, ls, ww] = f4;
      console.log(zs, ls, ww);
      // 2. 对象解构
      // 对象解构按照键名的匹配模式
      const zhao = {
        name: "赵四",
        age: 30,
        sex: "男",
        xiaopin() {
          // 对象方法简洁写法
          console.log("我们可以演小品");
        },
      };
      let { name, sex, age: nianling } = zhao;
      // age: nianling 为age取别名
      console.log(name, sex, nianling);
      let { xiaopin } = zhao;
      xiaopin();

      //复杂解构
      const wangfei = {
        name: "王菲",
        age: 18,
        songs: ["红豆", "流年", "暧昧", "传奇"],
        history: [{ name: "窦唯" }, { name: "李亚鹏" }, { name: "谢霆锋" }],
      };
      let {
        songs: [one, two, three],
        history: [first, second, third],
      } = wangfei;
      console.log(one, two, three, first, second, third);
    </script>
  </body>
</html>
